---
sidebar_position: 12
---

# Interceptors

Message transactions can be intercepted to change their contents or execute other code.

### `requestInterceptor` {#requestInterceptor}

- Type: ([`RequestDetails`](#RequestDetails)) => [`RequestDetails`](#RequestDetails) | \{`error: string`\}

Triggered before a user message is sent out. This method MUST either return a [`RequestDetails`](#RequestDetails) object or
an object that contains an `error` property to cancel the request.

<a href="https://youtu.be/0jzILPqA454?si=2YDbr5P0vMnCt_g9&t=201">
  <img src={YoutubeLogo} className={'youtube-icon'} />
  Video demo
</a>

#### Example

import ComponentContainerInterceptors from '@site/src/components/table/componentContainerInterceptors';
import DeepChatBrowser from '@site/src/components/table/deepChatBrowser';
import LineBreak from '@site/src/components/markdown/lineBreak';
import BrowserOnly from '@docusaurus/BrowserOnly';
import YoutubeLogo from '/img/youtube.png';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs';

<BrowserOnly>{() => require('@site/src/components/nav/autoNavToggle').readdAutoNavShadowToggle()}</BrowserOnly>

<ComponentContainerInterceptors propertyName={'requestInterceptor'} displayConsole={true}>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={true}></DeepChatBrowser>
</ComponentContainerInterceptors>

<Tabs>
<TabItem value="js" label="Sync">

```js
chatElementRef.requestInterceptor = (requestDetails) => {
  console.log(requestDetails); // printed above
  requestDetails.body = {prompt: requestDetails.body.messages[0].text}; // custom body
  return requestDetails;
};
```

</TabItem>
<TabItem value="py" label="Async">

```js
// Async function
chatElementRef.requestInterceptor = async (requestDetails) => {
  console.log(requestDetails); // printed above
  const otherTask = await fetch('http://localhost:8080/other-task');
  if (!otherTask.ok) {
    return {error: 'Error in other task'};
  }
  return requestDetails;
};

// Promise function - use resolve() for both success and error responses
chatElementRef.requestInterceptor = (requestDetails) => {
  return new Promise((resolve) => {
    console.log(requestDetails); // printed above
    fetch('http://localhost:8080/other-task').then((otherTask) => {
      if (!otherTask.ok) {
        return resolve({error: 'Error in other task'});
      }
      resolve(requestDetails);
    });
  });
};
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

#### `RequestDetails` {#RequestDetails}

- Type: \{`body: any`, `headers: {[key: string]: string}`\}

`body` is the outgoing requests's message contents. <br />
`headers` is the outgoing requests's header contents. <br />

<LineBreak></LineBreak>

### `responseInterceptor` {#responseInterceptor}

- Type: (`response: any`) => `determined`

Triggered when a message has been received from the target service.
The types for the return argument is `determined` by the connection variety used:

- If you are connecting to a server via the [`request`](/docs/connect/#request) property - the type will be [`Response`](/docs/connect/#Response).
- If you are connecting via the [`directConnection`](/docs/directConnection) property - the type will be defined by the chosen service API.

<a href="https://youtu.be/0jzILPqA454?si=2YDbr5P0vMnCt_g9&t=201">
  <img src={YoutubeLogo} className={'youtube-icon'} />
  Video demo
</a>

#### Example

<ComponentContainerInterceptors propertyName={'responseInterceptor'} displayConsole={true}>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={true}></DeepChatBrowser>
</ComponentContainerInterceptors>

<Tabs>
<TabItem value="js" label="Sync">

```js
chatElementRef.responseInterceptor = (response) => {
  console.log(response); // printed above
  return response;
};
```

</TabItem>
<TabItem value="py" label="Async">

```js
// Async function
chatElementRef.responseInterceptor = async (response) => {
  console.log(response); // printed above
  const otherTask = await fetch('http://localhost:8080/other-task');
  if (!otherTask.ok) {
    return {error: 'Error in other task'};
  }
  return response;
};

// Promise function - use resolve() for both success and error responses
chatElementRef.responseInterceptor = (response) => {
  return new Promise((resolve) => {
    console.log(response); // printed above
    fetch('http://localhost:8080/other-task').then((result) => {
      if (!result.ok) {
        return resolve({error: 'Error in other task'});
      }
      resolve(response);
    });
  });
};
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>

### `validateInput` {#validateInput}

- Type: (`text?: string`, `files?: File[]`) => `boolean`

Triggered when the user changes input `text` or `files` that are going to be sent to the target service. <br />
The method must return a boolean value with either _true_ or _false_ for whether the input contents are valid.

#### Example

<ComponentContainerInterceptors propertyName={'validateInput'} displayConsole={false}>
  <DeepChatBrowser style={{borderRadius: '8px'}} demo={true} mixedFiles={true}></DeepChatBrowser>
</ComponentContainerInterceptors>

<Tabs>
<TabItem value="js" label="Code">

```js
chatElementRef.validateInput = (text, files) => {
  return text || files.length > 0;
};
```

</TabItem>
</Tabs>

<LineBreak></LineBreak>
